<template>
    <!-- 无逻辑的组件
         指的是只需要分发 :value="value" v-on="$listeners" :config="config" 就可以运行的组件
     -->
    <section>
        <!-- elm，无逻辑组件 -->
        <template v-if="isElmComponent()">
            <component :is="config.type"
                       :value="value"
                       v-bind="config.props"
                       v-on="$listeners"/>
        </template>
        <!-- 内置，无逻辑组件 -->
        <template v-else-if="pureComponentNameDict[config.type]">
            <component :is="pureComponentNameDict[config.type]"
                       :value="value" v-on="$listeners" :config="config"/>
        </template>
        <template v-else>
            <!-- 其它组件，或者引用已有组件，并做了一些处理 -->

            <!-- 图片上传 -->
            <template v-if="config.type === dict.uploadFiles">
                <UploadFiles :value="value"
                             v-bind="config.props"
                             v-on="$listeners"
                             @change="utils('validate',value)"/>
            </template>

            <!-- 其它情况，暂未设置2 -->
            <el-alert v-else title="未知组件" type="error"/>
        </template>
    </section>
</template>

<script>
    import {pureComponentNameDict} from './dict'

    export default {
        components: {
            Textarea: () => import('./cmms/Textarea'),
            AsyncSelect: () => import('./cmms/AsyncSelect'),
            AsyncSelectGrade: () => import('./cmms/AsyncSelectGrade'),
            AsyncRadio: () => import('./cmms/AsyncRadio'),
            AsyncCheckbox: () => import('./cmms/AsyncCheckbox'),
            WangEditor: () => import('./cmms/WangEditor'),
            Phone: () => import('./cmms/Phone'),
            NameSwitch: () => import('./cmms/Switch'),
            Area: () => import('./cmms/Area'),
            Number: () => import('./cmms/Number'),


            UploadFiles: () => import('components/UploadFiles'),
            SingleUploadImg: () => import('components/new-upLoadImg/SingleUploadImg'),
            MultipleUploadImgs: () => import('components/new-upLoadImg/MultipleUploadImgs'),
        },
        inject: ['version', 'dict', 'utils'],
        props: {
            config: Object,
            value: {
                default: undefined,
            },// 构造数据时，已经生成了默认值，index.vue,
        },
        data() {
            this.pureComponentNameDict = pureComponentNameDict
            return {}
        },
        methods: {
            isElmComponent() {
                return /^el-/.test(this.config.type)
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>
